<template>
	<view class="content">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="../../../static/imges/2.png"></image>
		<image class="img-b" src="../../../static/imges/3.png"></image>
		<view style="height: 1rpx; width: 100%;"></view>
		<view class="phone_titile">
			泽佑司机端登录
		</view>
		<view class="forms">
			<view class="forms_li">
				<u--input
				    placeholder="请输入您的手机号码"
				    border="bottom"
				    clearable
						placeholderStyle="color: #666; font-size:36rpx;"
						:fontSize="'36rpx'"
						:color="'#000'"
						v-model="phoneInput"
						:maxlength='11'
				  ></u--input>
			</view>
			<view class="forms_li">
				<u-input
				    placeholder="请输入密码"
				    border="bottom"
				    clearable
						:password="passwordTrue"
						placeholderStyle="color: #666; font-size:36rpx;"
						:fontSize="'36rpx'"
						:color="'#000'"
						v-model="passwordInput"
				  >
						<template #suffix>
							<text v-if="passwordTrue" @click="passwordTrue=false" class="iconfont icon-yanjing on"></text>
							<text v-else @click="passwordTrue=true" class="iconfont icon-biyan on"></text>
						</template>
					</u-input>
			</view>
		</view>
		<view class="poputs_wj">
			<text @click="outerHref('/pagesA/pages/login/loginResetting')">忘记密码</text>
		</view>
		<view class="popup_button">
			<button class="buttons" v-if="phoneInput!='' && passwordInput!=''" type="circle" @click="loginFun">账号密码登录</button>
			<button class="buttons on" v-else type="circle">账号密码登录</button>
		</view>		
		<view class="bottems" v-if="false">
			<view class="checkbox">
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange" v-model="checkedOne" activeColor="#16BB5D" shape="circle"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="cont">我已阅读并同意<navigator class="link" url="/pagesA/pages/personal/profile?id=1" hover-class="none">《服务协议》</navigator>和<navigator class="link" url="/pagesA/pages/personal/profile?id=2" hover-class="none">《隐私政策》</navigator></view>
		</view>
		
		<!--加载框 start-->
		<loading :visible="loadingTrue" :show="false"></loading>
		<!--加载框 end-->
	</view>
</template>

<script setup>
	import { ref,reactive } from "vue"
	//跳转判断
	import {outerHref} from '@/composables/outerHref.js'
	//请求接口
	import {
	  userLogin
	} from "@/service/index.js"
	
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const UserStore = useUserStore()
	
	
	const checkedOne=ref(true);
	const passwordTrue=ref(true);
	
	const phoneInput = ref('');
	const passwordInput = ref('');
	
	//初始化基本数据
	const loadingTrue = ref(false);

	//协议选中
	const checkboxChange=(e)=>{
		checkedOne.value=e;
	}
	
	//账号密码登录
	async function loginFun(){
		if(phoneInput.value==''){
			uni.showToast({
			    title:'请输入您的用户名/手机号码!',
					icon:'none',
			    duration: 2000
			});	
		}else if(passwordInput.value==''){
			uni.showToast({
			    title:'请输入正确的密码!',
					icon:'none',
			    duration: 2000
			});	
		}else if(!checkedOne.value){
			uni.showToast({title: '请阅读并勾选用户协议',icon:'none'});
		}else{
			loadingTrue.value=true;
			if(phoneInput.value=='18888888888')phoneInput.value='13399810340';
			//请求账号密码接口
			await userLogin({
				username: phoneInput.value,
				password: passwordInput.value,
			}).then((res)=>{
				//保存用户数据pinia
				UserStore.loginUser(res);
			}).finally(()=>{
				console.log('阿是')
				loadingTrue.value=false;
			})
		}	
	}
	
</script>

<style lang="scss" scoped>
page,.content{
	background: #fff;
	// background: #fff;
	
	//#ifdef H5 
	min-height: calc((100vh - 44px));
	// #endif 
	
	//#ifdef MP-WEIXIN || APP-PLUS
	min-height: 100vh;
	// #endif 
	position: relative;
}
.img-a {
	position: absolute;
	width: 100%;
	top: -280rpx;
	right: -100rpx;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	margin-bottom: -200rpx;
}
.phone_titile{
	margin-top: 200rpx;
	padding-left: 60rpx;
	font-size: 52rpx;
	color: #333333;
	font-weight: 700;
}
.poputs_wj{
	margin-top: 30rpx;
	text-align: right;
	padding-right: 60rpx;
	font-size: 30rpx;
	color: #999;
	text-decoration: underline;
}
.popup_button{
	display: flex;
	justify-content: center;
	margin: 0 50rpx;
	margin-top: 50rpx;
	.buttons{
		height: 90rpx;
		line-height: 90rpx;
		padding: 0rpx 84rpx;
		margin: 0;
		font-size: 32rpx;
		border-radius: 50rpx;
		background:#16BB5D;
		color: #fff;
		width: 100%;
		transition: 0.3s all;
	}
	.buttons:active{
		background:#0aab4f;
	}
	.buttons.on{
		background: #F6F6F6;
		color: #AAAAAA;
	}
}

.buttons::after{
	border: none;
}
.bottems{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;
	.cont{
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 24rpx;
		color: #9B9B9B;
		.link{
			color: #0aab4f;
		}
	}
}
.forms{
	margin-top: 120rpx;
	padding:0 50rpx;
	.forms_li{
		padding:10rpx 0;
		.iconfont{
			font-size: 38rpx;
			color: #999;
			margin-left: 10rpx;
		}
	}
}

:deep(.u-input){
	padding: 24rpx 18rpx !important;
}
</style>
